{{- block "header" . -}}
<link href="/css/bootstrap-table.min.css" rel="stylesheet" rel="stylesheet">
<link href="/css/bootstrap-switch.min.css" rel="stylesheet" rel="stylesheet">
{{- end -}}
{{ block "content" .data}}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">路由列表</h1>
    <button type="button" id="create_btn"  class="btn btn-primary">创建</button>
</div>

<table id="table"
       data-sort-name="update"
       data-sort-order="desc"
>

    <caption>List of {{.name}}</caption>
    <thead>
    <tr>
        {{- range $i,$t := (index .data.Title .zone)}}
        <th data-field="{{index $.data.Fields $i}}" data-sortable="true" >{{ $t}}</th>
        {{- end }}
        <th data-field="status" data-align="center" data-formatter="statusSwitch">状态</th>
        <th data-field="operate" data-align="center" data-formatter="operateFormatter" data-events="operateEvents">操作</th>
    </tr>
    </thead>

</table>
<div id="detail_container">

</div>
<!--<div class="wrapper wrapper_small" id="detail_container">-->
<!--    <div class="wrapper_header">-->
<!--        <span class="wrapper_title" id="detail_title">配置详情</span>-->
<!--        <button class="wrapper_button btn btn_default" id="detail_close" >关闭</button>-->
<!--        <br>-->
<!--    </div>-->
<!--    <div class="card wrapper_body">-->
<!--        <div class="card-body">-->
<!--            <table class="table table-bordered">-->
<!--                <thead class="thead-light">-->
<!--                <tr>-->
<!--                    <th>属性</th>-->
<!--                    <th>配置</th>-->
<!--                </tr>-->
<!--                </thead>-->
<!--                <tbody id="detail_table_body">-->
<!--                </tbody>-->
<!--            </table>-->

<!--        </div>-->
<!--    </div>-->
<!--</div>-->
{{- end -}}
{{- block "script" . -}}
<script src="/js/bootstrap-table.min.js"></script>
<script src="/js/bootstrap-switch.min.js"></script>
<script src="/js/form-render.js"></script>
<script>
    let $table = $('#table')
    let detail = modal.table("detail_container")
    $("#create_btn").click(function () {
        window.location.href="/{{.name}}/create"
    })
    function responseHandler(res) {
        let d = res.data
        return d
    }
    function statusSwitch(value, row, index,field){

        if (row["disable"]) {
           return `<input value="${row.name}" name="disable" type="checkbox" checked />`
        }
        return `<input value="${row.name}" name="disable" type="checkbox" />`
    }

    function detailFormatter(name,data) {
        let content = ""
        dashboard.get("/profession/{{.name}}/"+`${data["driver"]}`, function (res) {
            if (res.code !== 200) {
                return http.handleError(res, "获取driver信息失败")
            }
            let render = res.data["render"]
            let sort = render["ui:sort"]
            let properties = render["properties"]
            if (sort != "undefined" && typeof sort == "object") {
                content += "<tr><td style='min-width: 100px'>"+"ID"+"</td><td>"+data["id"]+"</td></tr>"
                content += "<tr><td style='min-width: 100px'>"+"Name"+"</td><td>"+data["name"]+"</td></tr>"
                content += "<tr><td style='min-width: 100px'>"+"Driver"+"</td><td>"+data["driver"]+"</td></tr>"
                Object.keys(sort).forEach(function (index) {
                    let key = sort[index]
                    let label = getLabel(key,properties[key])
                    if(data[key] instanceof Object){
                        content += "<tr><td style='min-width: 100px'>"+label+"</td><td>"+JSON.stringify(data[key])+"</td></tr>"
                    }else {
                        content += "<tr><td style='min-width: 100px'>"+label+"</td><td>"+data[key]+"</td></tr>"
                    }
                })
                content += "<tr><td style='min-width: 100px'>"+"更新时间"+"</td><td>"+data["update"]+"</td></tr>"
                content += "<tr><td style='min-width: 100px'>"+"创建时间"+"</td><td>"+data["create"]+"</td></tr>"
            } else {
                Object.keys(data).forEach(function (key) {
                    if(data[key] instanceof Object){
                        content += "<tr><td style='min-width: 100px'>"+key+"</td><td>"+JSON.stringify(data[key])+"</td></tr>"
                    }else {
                        content += "<tr><td style='min-width: 100px'>"+key+"</td><td>"+data[key]+"</td></tr>"
                    }
                })
            }
        }, function (res) {
            return http.handleError(res, "获取driver信息失败")
        })
        detail.show(name, content)
    }

    function operateFormatter(value, row, index) {
        return [
            '<a class="edit" href="/{{.name}}/edit?name=',
            row.name,
            '" title="edit">',
            '配置',
            '</a>  ',
            '<a class="detail" href="javascript:void(0)" title="detail">',
            '详情',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '删除',
            '</a>  ',
        ].join('')
    }
    window.operateEvents = {
        'click .remove': function (e, value, row, index) {
            let msg ="确认删除 "+row.name+" {{index .module.I18nName .zone}}?"
            common.confirm("删除{{index .module.I18nName .zone}}", msg, function (){
                dashboard.delete( "/api/{{.name}}/"+row.name, function (res) {
                    if(res.code === 200){
                        common.message("删除成功", "success")
                        $table.bootstrapTable('remove', {
                            field: 'id',
                            values: [row.id]
                        })
                        renderStatus()
                        return
                    }
                    return http.handleError(res, "删除失败")
                }, function (res) {
                    return http.handleError(res, "删除失败")
                })
            }, null)
        },
        'click .detail': function (e, value, row, index) {
            dashboard.get("/api/{{.name}}/"+row.name, function (res) {
                if(res.code === 200){
                    let data = res.data
                    this.detailFormatter(row.name,data)
                    return
                }
                return http.handleError(res, "获取详情失败")
            }, function (res) {
                return http.handleError(res, "获取详情失败")
            })
        }
    }
    function renderSwitch(){
        this.bootstrapSwitch({
            onText : "下线",
            offText : "发布",
            onColor : "warning",
            offColor : "success",
            inverse: true,
            size : "small",
            onSwitchChange : function(event, disable) {
                let target = $(this)
                dashboard.patch("/api/{{.name}}/"+this.value, {"disable":disable}, function (res) {
                    if(res.code === 200){
                        common.message("变更成功", "success")
                        return
                    }
                    target.bootstrapSwitch("toggleState", true);
                    return http.handleError(res, "变更失败")
                }, function (res) {
                    target.bootstrapSwitch("toggleState", true);
                    return http.handleError(res, "变更失败")
                })
            },

        });
    }
    function renderStatus(){
        renderSwitch.apply( $("[name='disable']"))
    }
    $(document).ready(function(){
        $table.bootstrapTable({
            url:"/api/routers/",
            responseHandler:responseHandler,
            toggle:"table",
            flat:true,
            onSort:function (name, order){
                $table.bootstrapTable('refresh')

            },
            onLoadSuccess: function () {	//在成功加载远程数据时触发
                renderStatus()
            },
        })
    })

</script>
{{- end -}}